<!-- eslint-disable @typescript-eslint/no-explicit-any -->
<!-- eslint-disable @typescript-eslint/no-unused-vars -->
<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import request from '@/utils/request'

// do not use same name with ref
const form = reactive({
  ID: '',
  name: '',
  password:'',
  email:'',
  count:''
})

const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}



// 初始化为空数组而非对象

const Users = ref<any[]>([])

// 获取种类信息
const fetchUsers = async () => {
  try {
    const response = await fetch('http://localhost:8080/userlist',{
      credentials:"include",
      headers:{
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      }
    }) // 向后端发送请求
    if (!response.ok) {
      throw new Error('Network response was not ok')
    }
    const data = await response.json()
    Users.value = data // 将返回的书籍数据赋值给 Books
  } catch (error) {
    console.error('Error fetching categorys data:', error)
    Users.value = [] // 请求失败时，清空 Books 数据
  }
}
onMounted(() => {
  fetchUsers() // 组件挂载时调用 fetchBooks 获取数据
})

</script>

<template>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-table :data="Users" stripe style="width: 100%">
            <el-table-column prop="id" label="ID" width="100" />
            <el-table-column prop="name" label="Name" width="160" />
            <el-table-column prop="password" label="Password" width="350" />
            <el-table-column prop="email" label="Email" width="200" />
            <el-table-column prop="count" label="Count"  />
        </el-table>
    </el-tabs>
</template>
  
<style lang="scss" scoped>

</style>